<template>
  <div style="background: white;width: 1700px;height: 725px;margin: 0px auto;padding-top: 30px">
    <div
      style="border: 1px solid rgb(224, 225, 229);width: 95%;height: 95%;margin: 0 auto;border-radius: 5px;padding: 10px 15px 0 15px">
<span style="font-weight: 700;
    font-style: normal;
    font-size: 16px;">站点信息</span>
      <div style="border-top: 1px solid rgb(224, 225, 229);width: 100%;height: 100%">
        <!--left view -->
        <div style="width: 50%;padding-top: 20px;float: left">
          <el-form :model="listData" label-width="85px" size="small ">
            <el-form-item label="站点名称">
              <el-input disabled style="width: 120px" v-model="listData.siteName"></el-input>
            </el-form-item>
            <el-form-item label="所属地区">
              <el-input disabled style="width: 120px" v-model="listData.area"></el-input>
            </el-form-item>
            <el-form-item label="站点地址">
              <el-input disabled style="width: 230px" v-model="listData.siteAddress"></el-input>
            </el-form-item>
            <el-form-item label="区域负责人">
              <el-input disabled style="width: 120px" v-model="listData.areaResponsible"></el-input>
            </el-form-item>
            <el-form-item label="联系方式">
              <el-input disabled style="width: 180px" v-model="listData.areaResponsiblePhone"></el-input>
            </el-form-item>
            <el-form-item label="站点负责人">
              <el-input disabled style="width: 120px" v-model="listData.siteResponsible"></el-input>
            </el-form-item>
            <el-form-item label="联系方式">
              <el-input disabled style="width: 180px" v-model="listData.siteResponsiblePhone"></el-input>
            </el-form-item>
          </el-form>
          <!--图片-->
          <div class="demo-image__placeholder">
            <div class="block">
              <el-image v-if="imgPathSite" :src="imgPathSite" style="width:700px;height: 280px"></el-image>
            </div>
          </div>
        </div>
        <!--right view -->
        <div style="width: 50%;float: right;height: 630px;padding-top: 20px;">
          <!--地图-->
          <div id="map-container"
               style="width: 100%;height: 100%;border: 1px solid rgb(220, 222, 226);">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import AMap from "AMap";
import axios from "axios";

var map, marker;
export default {
  components: {},
  data() {
    return {
      imgPathSite: "",
      listData: {
        siteName:"",
        area:"",
        siteAddress:"",
        areaResponsible:"",
        areaResponsiblePhone:"",
        siteResponsible:"",
        siteResponsiblePhone:"",
      },
      tableData_Site: {
        name: "",
      },
      IMG_src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
      arriveCoor: [119.31213, 33.23549],//定位坐标
      arrive: "宝应站",//具体信息
    };
  },
  //监听属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
  created() {
    this.userId = JSON.parse(localStorage.getItem("message")).Id;
    console.log(JSON.parse(localStorage.getItem("message")).id)
    this.getList()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
  mounted() {
    this.mapDraw(this.arriveCoor)
  },
  //方法集合",
  methods: {
    //获取数据
    getList() {
      axios("/JX_java/site/site/getSiteTbDetais?userId="+this.userId).then((res) => {
        this.listData = res.data.data
        console.log(res ,2)
        this.imgPathSite = JSON.parse(this.listData.xianzhaozhaopian)[0].url
        console.log((JSON.parse(this.listData.xianzhaozhaopian)[0]),1)
        let  dizhiArr=[];
        dizhiArr.push(this.listData.jingdu.split(',')[0]);
        dizhiArr.push(this.listData.jingdu.split(',')[1]);
        this.arriveCoor=dizhiArr;
        this.showMap()
        console.log( JSON.stringify(this.listData))
        localStorage.setItem("listDataArr", JSON.stringify(this.listData));
      })
    },

    showMap() {
      // this.arriveCoor = [119.31213, 33.23549]
      this.mapDraw(this.arriveCoor);
      this.addMarker(this.arriveCoor)

    },
    mapDraw(arriveCoor) {
      map = new AMap.Map('map-container', {   //map-location是嵌地图div的id
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom: 16, //初始化地图层级
        center: arriveCoor //初始化地图中心点
      });
      // 定位点
      this.addMarker(arriveCoor);
    },
    addMarker(arriveCoor) {
      marker = new AMap.Marker({
        icon: "",  //图片ip
        imageSize: "20px",
        position: new AMap.LngLat(arriveCoor[0], arriveCoor[1]),
        offset: new AMap.Pixel(-13, -30),
        // 设置是否可以拖拽
        draggable: false,
        cursor: 'move',
        // 设置拖拽效果
        raiseOnDrag: true
      });
      marker.setMap(map);
    },
  },
  //生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
  beforeCreate() {
  },

  //生命周期 - 挂载之前",html模板未渲染
  beforeMount() {
  },
  //生命周期 - 更新之前",数据模型已更新,html模板未更新
  beforeUpdate() {
  },
  //生命周期 - 更新之后",数据模型已更新,html模板已更新
  updated() {
  },
  //生命周期 - 销毁之前",
  beforeDestroy() {
  },
  destroyed() {
  },
  //生命周期 - 销毁完成",
  //如果页面有keep-alive缓存功能，这个函数会触发",
  activated() {
  },
}
</script>
<style scoped>
</style>
